import { Link, Outlet } from 'umi';
import { Layout } from 'antd';
import { Navigation, Breadcrumb } from '../components';
import { Application } from '../core';
import React, { useState, useEffect } from 'react';

import 'devextreme/dist/css/dx.light.css';
import 'antd/dist/reset.css'; // Updated Ant Design import
import styles from './index.less';

const { Header, Content, Footer } = Layout;

export default function AppLayout() {
  // Use state to track application initialization
  const [isInitialized, setIsInitialized] = useState(false);
  
  useEffect(() => {
    // Check initialization status periodically
    const checkInitStatus = () => {
      const app = Application.getInstance();
      if (app.isInitialized) {
        setIsInitialized(true);
        console.log('Application initialized detected in layout');
      }
    };
    
    // Check immediately
    checkInitStatus();
    
    // Also set up an interval to check in case the layout loads before initialization
    const intervalId = setInterval(checkInitStatus, 500);
    
    // Clean up interval on unmount
    return () => clearInterval(intervalId);
  }, []);
  
  // Debug log to check initialization status
  console.log('Current initialization status:', isInitialized);

  return (
    <Layout className={styles.container} style={{ minHeight: '100vh' }}>
      <Header className={styles.header} style={{ padding: '0 16px', display: 'flex', alignItems: 'center' }}>
        <div className={styles.logo} style={{ marginRight: '24px' }}>
          <h1 style={{ color: 'white', margin: 0 }}>Mini-XAF</h1>
        </div>
        <nav className={styles.nav}>
          <ul style={{ display: 'flex', margin: 0, listStyle: 'none' }}>
            <li style={{ marginRight: '16px' }}>
              <Link to="/" style={{ color: 'white' }}>Application</Link>
            </li>
            <li style={{ marginRight: '16px' }}>
              <Link to="/docs" style={{ color: 'white' }}>Documentation</Link>
            </li>
            <li>
              <a href="https://github.com/username/mini-xaf" style={{ color: 'white' }}>Github</a>
            </li>
          </ul>
        </nav>
      </Header>
      
      <Layout>
        {/* Always show Navigation component */}
        <Navigation />
        
        <Layout style={{ padding: '0 24px 24px' }}>
          {isInitialized && <Breadcrumb />}
          <Content className={styles.content} style={{ padding: 24, margin: 0, background: '#fff' }}>
            <Outlet />
          </Content>
        </Layout>
      </Layout>
      
      <Footer className={styles.footer} style={{ textAlign: 'center' }}>
        <p style={{ margin: 0 }}>Mini-XAF: DevExtreme React implementation of XAF framework &copy; {new Date().getFullYear()}</p>
      </Footer>
    </Layout>
  );
}
